problem in dynamic vertical drop down menu list

i have designed a menu list program in which i'm facing a problem where the last li item (white crappie) shifts down when i hover mouse pointer to just above li item (ozrack bazz) of white crappie instead (white crappie) li item should be to be sticked just below (ozrack bazz) li item without a down shift.

i request u all to kindly sort the problem.

i have send menu_css.html file along with the layout.css file.

thanks

html file:

Expand|Select|Wrap|Line Numbers

 <html>

<head>

<script language="JavaScript" type="text/javascript">
 
window.onload = activateMenu;
 
function activateMenu() {

/* currentStyle restricts the Javascript to IE only */
 
var navroot = document.getElementById("nav");
 
/* Get all the list items within the menu */
 
var lis=navroot.getElementsByTagName("LI");

//alert(lis.item(0).lastChild.tagName);

for (i=0; i<lis.length; i++) {
 
/* If the LI has another menu level */

if(lis.item(i).lastChild.tagName=="UL"){
 
/* assign the function to the LI */

lis.item(i).onmouseover=function() {
 
/* display the inner menu */

this.lastChild.style.display="block";

}

lis.item(i).onmouseout=function() {

this.lastChild.style.display="none";

}

}

}
 
}
 
</script>

<link href="layout.css" rel="stylesheet" type="text/css" />
 
</head>

<body>

<p>this is test menu</p>

<br />

<ul id="nav">

<li >Sunfishes

<ul >

<li><a href="">Blackbanded»sunfish</a></li>

<li><a href="">Shadow bass</a></li>

<li><a href="">Ozark bass</a>

<ul class="pg">

<li class="ed">a</li>

<li class="er">b

<ul>

<li class="aq">m</li>

<li class="wa">n</li>

</ul>

</li>

<li class="eq">c</li>

</ul>

</li>

<li class="sd"><a href="">White crappie</a></li>

</ul>

</li>
 
<li >Grunts

<ul >

<li><a href="">Smallmouth grunt

</a></li>

<li><a href="">Burrito</a></li>

<li><a href="">Pigfish</a></li>

</ul>

</li>
 
<li >Remoras

<ul >

<li><a href="">Whalesucker</a></li>

<li><a href="">Marlinsucker</a></li>

<li><a href="">Ceylonese remora</a></li>

<li><a href="">Spearfish remora</a></li>

<li><a href="">Slender suckerfish</a></li>

</ul>

</li>

</ul>
 
</body>
 
</html>

css file:

Expand|Select|Wrap|Line Numbers

 ul {

padding:0;

margin:0;

list-style: none;

}

a {text-decoration:none;}
 
li {

float: left;

position: relative;

width: 180px;
 
}
 
/*li ul {

display: none;

position: absolute;

top: 1em;

left: 0;

}*/

#nav ul, #nav ul ul, #nav ul ul ul{

display:none;

position:absolute;

top: 1em;

left: 0;

}

/*#nav {

display: none;

position: absolute;

top: 1em;

left: 0;
 
}*/
 
li > ul {

top: auto;

left: auto;

}

/*#nav li:hover ul { display:block; } */
 
#nav li:hover ul ul, #nav li:hover ul ul ul{ display:none; }
 
/*#nav ul li:hover ul {

display: block;
 
}*/

#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{

display:block;

top: auto;

left: auto;

position:relative;

}

.pg {padding-left:140px;}

/*ul li:hover ul {display: block;}*/
 
.ed {display:block;top:-18px;left:-20px;}

.er {display:block;top:-18px;left:-20px;}

.eq {display:block;bottom:20px;left:-20px;}

#nav li.sd {padding-top:-10px;}

.aq {display:block;top:-18px;left:20px;}

.wa {display:block;top:-18px;left:20px;}

.sd {display:block;}

Jan 21 '09 #1

Subscribe Post Reply

2930

by: vikram.cvk | last post by:

Hello Experts, Im trying to design a CSS vertical drop down menu which should have the following functionality. Home About Us | -->Overview

HTML / CSS

Problem with CSS and drop down menus

by: Xarky | last post by:

Hi, I followed this link to design my drop-down menu: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/odc_fp2003_ta/html/OfficeFrontPageCreateDropDownMenu.asp The css file being...

Javascript

Custom build DataGridColumn event problem

by: Girish | last post by:

OK.. phew. Playing with data grids for the past few days has been fun and a huge learning experience.. My problem. I have a requirement to display a gird with a gird. Within the embedded grid,...

ASP.NET

Dynamic drop down list

by: mcgrew.michael | last post by:

I hope this is the right group. I am very new to ASP so this is probably a stupid question. I have some vbscript that query's AD and populates a recordset. I know the recorset contains the...

ASP / Active Server Pages

CSS Drop Down Menu in IE7

by: TycoonUK | last post by:

Hi, As I do not have IE7 on my computer, I was wondering if there is a fault in my CSS Menu when using IE7. Please can someone look at my site - http://www.worldofmonopoly.co.uk and tell me...

HTML / CSS

dynamic menu problem with onchange event

by: chobo | last post by:

Hi, I am trying to make a dynamic menu using javascript and an xml file. The structure of the page (test.html) is in the code below. When I load up the page the drop-down list is there, so I select a...

Javascript

dynamic nav/drop-down...

by: maya | last post by:

hi, I need help with a dynamic nav menu, http://www.mayacove.com/design/nav/nav.html it looks like I want it in IE 7, but in FF and IE 6 it's totally messed up.. in FF the main-nav section...

HTML / CSS

problem with IE

by: dinky | last post by:

the menu are displayed properly in FF,i.e. below the header part, but in IE the menus are shifted to upwards beside the logo. and hence it goes out of the page. please help ..... here's the css ...

HTML / CSS

Problem with horizonal dropdown css menu in IE6...

by: jerry101 | last post by:

Hi, I've been working on a horizontal drop down menu today, and I can get it to display perfectly in everything bar IE6. Basically instead of them lining up horizontally, they line up...

HTML / CSS

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

problem in dynamic vertical drop down menu list

Similar topics